import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:flutter_deer/res/colors.dart';

class SelectionWidget extends StatefulWidget {
  const SelectionWidget({
    super.key,
    this.numberOptions = const [], // 默认空列表
    this.timeOptions = const ['15min', '30min', '60min'],
    required this.onSelectionChanged,
  });

  final List<int> numberOptions;
  final List<String> timeOptions;
  final Function(int, String) onSelectionChanged; // 添加回调函数

  @override
  State<SelectionWidget> createState() => _SelectionWidgetState();
}

class _SelectionWidgetState extends State<SelectionWidget> {
  int? selectedNumber;
  String? selectedTime;
  bool isLeftExpanded = false;
  bool isRightExpanded = false;
  bool _isMouseOverDropdown = false;
  int? _hoveredNumber;
  String? _hoveredTime;

  final List<int> numberOptions = [];
  final List<String> timeOptions = [];

  @override
  void initState() {
    super.initState();
    numberOptions.addAll(widget.numberOptions);
    timeOptions.addAll(widget.timeOptions);
  }

  void selectNumber(int number) {
    widget.onSelectionChanged(number, selectedTime ?? '');
    setState(() {
      selectedNumber = number;
      isLeftExpanded = false;
    });
  }

  void selectTime(String time) {
    widget.onSelectionChanged(selectedNumber ?? 0, time);
    setState(() {
      selectedTime = time;
      isRightExpanded = false;
    });
  }

  void clearNumber() {
    widget.onSelectionChanged(0, selectedTime ?? '');
    setState(() {
      selectedNumber = null;
      isLeftExpanded = false;
    });
  }

  void clearTime() {
    widget.onSelectionChanged(selectedNumber ?? 0, '');
    setState(() {
      selectedTime = null;
      isRightExpanded = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 37,
          padding: const EdgeInsets.symmetric(horizontal: 1),
          decoration: const BoxDecoration(
            color: Colours.dark_app_main,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(3), topRight: Radius.circular(3)),
          ),
          child: Row(
            children: [
              Expanded(
                child: MouseRegion(
                  onEnter: (_) => setState(() => isLeftExpanded = true),
                  onExit: (_) {
                    Future.delayed(const Duration(milliseconds: 100), () {
                      if (!mounted) return;
                      if (!_isMouseOverDropdown) {
                        setState(() => isLeftExpanded = false);
                      }
                    });
                  },
                  child: GestureDetector(
                    child: Container(
                      margin: const EdgeInsets.all(5),
                      padding: const EdgeInsets.only(left: 10),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(3),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            selectedNumber != null ? selectedNumber.toString() : '所有油枪',
                            style:
                                TextStyle(color: selectedNumber != null ? Colours.text : Colors.black54, fontWeight: selectedNumber != null ? FontWeight.bold : FontWeight.normal),
                          ),
                          IconButton(
                            icon: Icon(selectedNumber != null ? Icons.close : Icons.arrow_downward, size: 18, color: Colours.blue4B7EFE),
                            padding: const EdgeInsets.all(4),
                            onPressed: selectedNumber != null ? clearNumber : null,
                            constraints: const BoxConstraints(),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: MouseRegion(
                  onEnter: (_) => setState(() => isRightExpanded = true),
                  onExit: (_) {
                    Future.delayed(const Duration(milliseconds: 100), () {
                      if (!mounted) return;
                      if (!_isMouseOverDropdown) {
                        setState(() => isRightExpanded = false);
                      }
                    });
                  },
                  child: GestureDetector(
                    child: Container(
                      margin: const EdgeInsets.all(5),
                      padding: const EdgeInsets.only(left: 10),
                      decoration: BoxDecoration(
                        color: Colours.white,
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            selectedTime ?? '当前班组',
                            style: TextStyle(
                              color: selectedTime != null ? Colours.text : Colors.black54,
                              fontWeight: selectedTime != null ? FontWeight.bold : FontWeight.normal,
                            ),
                          ),
                          IconButton(
                            icon: Icon(selectedTime != null ? Icons.close : Icons.arrow_downward, size: 18, color: Colours.blue4B7EFE),
                            padding: const EdgeInsets.all(4),
                            onPressed: selectedTime != null ? clearTime : null,
                            constraints: const BoxConstraints(),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        if (isLeftExpanded)
          Align(
            alignment: Alignment.centerLeft,
            child: MouseRegion(
              onEnter: (_) => _isMouseOverDropdown = true,
              onExit: (_) {
                _isMouseOverDropdown = false;
                setState(() {
                  isLeftExpanded = false;
                  _hoveredNumber = null;
                });
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2 - 50,
                margin: const EdgeInsets.only(left: 0, top: 3),
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: Colors.grey[200]!),
                  borderRadius: BorderRadius.circular(4),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.3),
                      spreadRadius: 1,
                      blurRadius: 3,
                    ),
                  ],
                ),
                child: Wrap(
                  children: numberOptions.map((number) {
                    return MouseRegion(
                      onEnter: (_) => setState(() => _hoveredNumber = number),
                      onExit: (_) => setState(() => _hoveredNumber = null),
                      child: GestureDetector(
                        onTap: () => selectNumber(number),
                        child: Container(
                          width: 30,
                          height: 30,
                          alignment: Alignment.center,
                          margin: const EdgeInsets.all(4),
                          decoration: BoxDecoration(
                            color: selectedNumber == number
                                ? const Color(0xFF4B7EFE)
                                : _hoveredNumber == number
                                    ? Colors.grey[200]
                                    : Colors.transparent,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text(
                            number.toString(),
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: _hoveredNumber == number ? FontWeight.bold : FontWeight.normal,
                              color: selectedNumber == number ? Colors.white : const Color(0xFF222222),
                            ),
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
            ),
          )
        else if (isRightExpanded)
          Align(
            alignment: Alignment.centerRight,
            child: MouseRegion(
              onEnter: (_) => _isMouseOverDropdown = true,
              onExit: (_) {
                _isMouseOverDropdown = false;
                setState(() {
                  isRightExpanded = false;
                  _hoveredTime = null;
                });
              },
              child: Container(
                // width: MediaQuery.of(context).size.width / 2 - 10,
                margin: const EdgeInsets.only(right: 0, top: 3),
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: Colors.grey[200]!),
                  borderRadius: BorderRadius.circular(4),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.3),
                      spreadRadius: 1,
                      blurRadius: 3,
                    ),
                  ],
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: timeOptions.map((time) {
                    return MouseRegion(
                      onEnter: (_) => setState(() => _hoveredTime = time),
                      onExit: (_) => setState(() => _hoveredTime = null),
                      child: GestureDetector(
                        onTap: () => selectTime(time),
                        child: Container(
                          width: double.infinity,
                          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
                          decoration: BoxDecoration(
                            color: selectedTime == time
                                ? const Color(0xFF4B7EFE)
                                : _hoveredTime == time
                                    ? Colors.grey[200]
                                    : Colors.transparent,
                          ),
                          child: Text(
                            time,
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: _hoveredTime == time ? FontWeight.bold : FontWeight.normal,
                              color: selectedTime == time ? Colors.white : const Color(0xFF222222),
                            ),
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
            ),
          ),
      ],
    );
  }
}
